<!DOCTYPE html >
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="keywords"  content = "图书 java jsp"/>
    <meta http-equiv="author" content="phenix"/>
    <link rel="stylesheet" type="text/css" href="./Style/skin.css" />
    <script src="Js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./Plugins/axios.min.js"></script>
    <script type="text/javascript" src="./Js/request.js"></script>
    <script>
        //图片预览
        function getFullPath(obj){
            if (obj){
                //ie
                if (window.navigator.userAgent.indexOf("MSIE") >= 1){
                    obj.select();
                    return document.selection.createRange().text;
                }else if (window.navigator.userAgent.indexOf("Firefox") >= 1){
                    //firefox　
                    return window.URL.createObjectURL(obj.files.item(0));
                }else if(navigator.userAgent.indexOf("Chrome")>0){
                    //chrome
                    return window.URL.createObjectURL(obj.files.item(0));
                }
                return obj.value;
            }
        }
        $(function(){
            $("#filePic").change(function(){
                let path = getFullPath($(this)[0]);
                console.log(path);
                $("#imgPic").prop("src",path);
            });

            window.$axios.request({
                url: 'type/list.auth',
                method: 'get'
            }).then(res => {
                if (res.code === 200) {
                    const data = res.data
                    let html = '<option value="0" selected="true">---请选择---</option>';
                    data.forEach(type => {
                        html += `<option value="${type.id}">${type.name}</option>`
                    })
                    $('#typeSelect').html(html)
                }
            })

            window.$axios.request({
                url: `book/one.auth`,
                method: 'get',
                params: {
                    id: window.location.search.split('=')[1]
                }
            }).then(res => {
                if (res.code === 200) {
                    const book = res.data;
                    $('input[name="id"]').val(book.id);
                    $('input[name="name"]').val(book.name);
                    $('input[name="author"]').val(book.author);
                    $('input[name="publish"]').val(book.publish);
                    $('input[name="stock"]').val(book.stock);
                    $('input[name="price"]').val(book.price);
                    $('input[name="address"]').val(book.address);
                    $('textarea[name="desc"]').val(book.desc);
                    $(`option[value=${book.typeid}]`).attr('selected', true);
                    $('#imgPic').prop('src', book.pic);
                } else {
                    alert(res.message)
                    window.location.href = '/book_list.html'
                }
            })

            $('#updateForm').submit(e => {
                e.preventDefault();
                const data = {
                    id: $('input[name="id"]').val(),
                    name: $('input[name="name"]').val(),
                    typeid: $('#typeSelect').val(),
                    author: $('input[name="author"]').val(),
                    publish: $('input[name="publish"]').val(),
                    stock: $('input[name="stock"]').val(),
                    price: $('input[name="price"]').val(),
                    address: $('input[name="address"]').val(),
                    desc: $('textarea[name="desc"]').val(),
                    pic: $('input[name="pic"]').val()
                }
                window.$axios.request({
                    url: 'book/update.auth',
                    method: 'post',
                    data: data,
                }).then(res => {
                    if (res.code === 200) {
                        alert('修改成功')
                        window.location.href = '/book_list.html'
                    } else {
                        alert(res.message)
                    }
                })
            })
        });
    </script>
</head>
    <body>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!-- 头部开始 -->
            <tr>
                <td width="17" valign="top" background="./Images/mail_left_bg.gif">
                    <img src="./Images/left_top_right.gif" width="17" height="29" />
                </td>
                <td valign="top" background="./Images/content_bg.gif">
                    
                </td>
                <td width="16" valign="top" background="./Images/mail_right_bg.gif"><img src="./Images/nav_right_bg.gif" width="16" height="29" /></td>
            </tr>
            <!-- 中间部分开始 -->
            <tr>
                <!--第一行左边框-->
                <td valign="middle" background="./Images/mail_left_bg.gif">&nbsp;</td>
                <!--第一行中间内容-->
                <td valign="top" bgcolor="#F7F8F9">
                    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                        <!-- 空白行-->
                        <tr><td colspan="2" valign="top">&nbsp;</td><td>&nbsp;</td><td valign="top">&nbsp;</td></tr>
                        <tr>
                            <td colspan="4">
                                <table>
                                    <tr>
                                        <td width="100" align="center"><img src="./Images/mime.gif" /></td>
                                        <td valign="bottom"><h3 style="letter-spacing:1px;">书籍管理 > 修改书籍</h3></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <!-- 一条线 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <!-- 添加产品开始 -->
                        <tr>
                            <td width="2%">&nbsp</td>
                            <td width="96%">
                                <table width="100%">
                                    <tr>
                                        <td colspan="2">
                                            <form id="updateForm">
                                                <table width="100%" class="cont">
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>编号：</td>
                                                        <td width="20%"><input class="text" type="text" name="id" value="" readonly/></td>
                                                        <td rowspan="8" valign="top" >
                                                            <fieldset style="width: 210px; height: 370px;">
                                                             <legend>图片预览</legend>
                                                             <img id="imgPic" src="" width="200px" height="350px"/>
                                                            </fieldset>
                                                        </td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td width="15%">名称：</td>
                                                        <td width="25%"><input class="text" type="text" name="name" value="" /></td>
                                                       
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>类型：</td>
                                                        <td width="20%">
                                                            <select id="typeSelect" name="typeid">
                                                               <option value="0">---请选择---</option>
                                                            </select>
                                                        </td>
                                                       
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>图片：</td>
                                                        <td width="20%"><input type="file" id="filePic" name="filePic"  value=""/>
                                                          <input type="hidden" name="pic"  value="">
                                                        </td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>库存量：</td>
                                                        <td width="20%"><input class="text" style="width:50px;" type="number" name="stock" value="" /></td>
                                                        
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>单价：</td>
                                                        <td width="20%"><input class="text" style="width:100px;" type="text" name="price" value="" /></td>
                                                        
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>出版社：</td>
                                                        <td width="20%"><input class="text"  type="text" name="publish" value=""/></td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>作者:</td>
                                                        <td width="20%"><input class="text"  type="text" name="author" value=""/></td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>存放地址:</td>
                                                        <td width="20%"><input class="text"  type="text" name="address"  value=""/></td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td>&nbsp;</td>
                                                        <td>简介：</td>
                                                        <td colspan="2"><textarea cols="150" rows="20" name="desc"></textarea></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>&nbsp;</td>
                                                        <td></td>
                                                        <td colspan="3"><input class="btn" type="submit" value="提交" /></td>
                                                    </tr>
                                                </table>
                                            </form>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="2%">&nbsp;</td>
                        </tr>
                        <!-- 添加产品结束 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="2%">&nbsp;</td>
                            <td width="51%" class="left_txt">
                                <img src="./Images/icon_mail.gif" width="16" height="11"> 客户服务邮箱：lyxy123@qq.com<br />
                            </td>
                            <td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    </table>
                </td>
                <td background="./Images/mail_right_bg.gif">&nbsp;</td>
            </tr>
            <!-- 底部部分 -->
            <tr>
                <td valign="bottom" background="./Images/mail_left_bg.gif">
                    <img src="./Images/buttom_left.gif" width="17" height="17" />
                </td>
                <td background="./Images/buttom_bgs.gif">
                    <img src="./Images/buttom_bgs.gif" width="17" height="17">
                </td>
                <td valign="bottom" background="./Images/mail_right_bg.gif">
                    <img src="./Images/buttom_right.gif" width="16" height="17" />
                </td>           
            </tr>
        </table>
    </body>
</html>